<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>串口精灵 (SerialGenius) - 专业的跨平台串口调试工具</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/placeholder.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <meta name="description" content="串口精灵是一款专业的跨平台串口调试工具，支持Windows、macOS和Linux，提供多种编码格式、协议解析和预设命令功能。">
    <meta name="keywords" content="串口调试,串口精灵,SerialGenius,串口工具,跨平台,串口通信">
    <meta name="author" content="罗耀生">
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">
                <h1>串口精灵</h1>
                <p>SerialGenius</p>
            </div>
            <ul class="nav-links">
                <li><a href="#features">功能特点</a></li>
                <li><a href="#screenshots">界面展示</a></li>
                <li><a href="#download">下载安装</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
        <div class="hero container">
            <div class="hero-content">
                <h2>专业的跨平台串口调试工具</h2>
                <p>为开发者、工程师和爱好者提供一个强大、易用且美观的界面来与串口设备进行通信和调试</p>
                <a href="#download" class="btn btn-primary">立即下载</a>
                <a href="https://github.com/" class="btn btn-secondary">查看源码</a>
            </div>
            <div class="hero-image">
                <div class="placeholder app-preview-placeholder" data-title="串口精灵应用预览"></div>
            </div>
        </div>
    </header>

    <section id="platforms" class="container">
        <div class="platform-badges">
            <div class="platform-badge">
                <i class="fab fa-windows"></i>
                <span>Windows</span>
            </div>
            <div class="platform-badge">
                <i class="fab fa-apple"></i>
                <span>macOS</span>
            </div>
            <div class="platform-badge">
                <i class="fab fa-linux"></i>
                <span>Linux</span>
            </div>
        </div>
    </section>

    <section id="features" class="container">
        <h2 class="section-title">功能特点</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-globe"></i></div>
                <h3>跨平台支持</h3>
                <p>可在Windows, macOS和Linux上运行，无需为不同系统寻找不同工具</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-cogs"></i></div>
                <h3>串口配置</h3>
                <p>支持常用波特率、数据位、校验位和停止位的配置</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-code"></i></div>
                <h3>多种编码格式</h3>
                <p>支持ASCII, UTF8, HEX格式的发送和显示</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-save"></i></div>
                <h3>预设命令</h3>
                <p>保存常用的命令和对应的编码格式，方便快速发送</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-clock"></i></div>
                <h3>定时发送</h3>
                <p>支持按设定间隔自动发送命令，便于测试周期性通信</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-exchange-alt"></i></div>
                <h3>协议解析</h3>
                <p>内置Modbus协议支持，可自定义协议格式，便于工业通信调试</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-file-export"></i></div>
                <h3>日志导出</h3>
                <p>可将通信记录导出为TXT或CSV文件，便于后续分析</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-bell"></i></div>
                <h3>Toast通知</h3>
                <p>提供友好的操作反馈和错误提示，提升用户体验</p>
            </div>
        </div>
    </section>

    <section id="screenshots" class="container">
        <h2 class="section-title">界面展示</h2>
        <div class="screenshots-container">
            <div class="screenshot">
                <div class="placeholder screenshot-placeholder" data-title="主界面"></div>
                <p>主界面</p>
            </div>
            <div class="screenshot">
                <div class="placeholder screenshot-placeholder" data-title="预设命令功能"></div>
                <p>预设命令功能</p>
            </div>
            <div class="screenshot">
                <div class="placeholder screenshot-placeholder" data-title="协议配置界面"></div>
                <p>协议配置界面</p>
            </div>
        </div>
    </section>

    <section id="download" class="container">
        <h2 class="section-title">下载安装</h2>
        <div class="download-options">
            <div class="download-card">
                <div class="download-icon"><i class="fab fa-windows"></i></div>
                <h3>Windows</h3>
                <p>支持Windows 10/11</p>
                <a href="#" class="btn">下载 (exe安装包)</a>
                <small>版本: 1.0.0 | 大小: 8MB</small>
            </div>
            <div class="download-card">
                <div class="download-icon"><i class="fab fa-apple"></i></div>
                <h3>macOS</h3>
                <p>支持Intel和M系列芯片</p>
                <a href="#" class="btn">下载 (dmg安装包)</a>
                <small>版本: 1.0.0 | 大小: 12MB</small>
            </div>
            <div class="download-card">
                <div class="download-icon"><i class="fab fa-linux"></i></div>
                <h3>Linux</h3>
                <p>支持Debian/Ubuntu等</p>
                <a href="#" class="btn">下载 (AppImage)</a>
                <small>版本: 1.0.0 | 大小: 10MB</small>
            </div>
        </div>
        <div class="source-download">
            <h3>源代码</h3>
            <p>串口精灵是开源软件，您可以查看源代码或参与贡献</p>
            <a href="https://github.com/" class="btn btn-secondary"><i class="fab fa-github"></i> GitHub 仓库</a>
        </div>
    </section>

    <section id="contact" class="container">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-info">
            <div class="contact-card">
                <div class="contact-icon"><i class="fas fa-user"></i></div>
                <h3>作者</h3>
                <p>罗耀生</p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="fas fa-globe"></i></div>
                <h3>官网</h3>
                <p><a href="https://i2kai.com" target="_blank">i2kai.com</a></p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="fab fa-weixin"></i></div>
                <h3>微信</h3>
                <p>sixichuangke</p>
            </div>
            <div class="contact-card">
                <div class="contact-icon"><i class="fas fa-rss"></i></div>
                <h3>公众号</h3>
                <p>极客第一行</p>
            </div>
        </div>
        <div class="feedback-form">
            <h3>意见反馈</h3>
            <p>如有任何问题或建议，欢迎发送邮件至：<a href="mailto:1034639560@qq.com">1034639560@qq.com</a></p>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2>串口精灵</h2>
                    <p>SerialGenius</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#features">功能特点</a></li>
                        <li><a href="#screenshots">界面展示</a></li>
                        <li><a href="#download">下载安装</a></li>
                        <li><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系方式</h3>
                    <p><i class="fas fa-envelope"></i> <a href="mailto:1034639560@qq.com">1034639560@qq.com</a></p>
                    <p><i class="fab fa-weixin"></i> sixichuangke</p>
                    <div class="social-icons">
                        <a href="https://github.com/" target="_blank"><i class="fab fa-github"></i></a>
                        <a href="https://i2kai.com" target="_blank"><i class="fas fa-globe"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 串口精灵 (SerialGenius). 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html> 